<script setup lang="ts">
import { ConfigGlobal } from '@fl/components'
import { useDesign } from '@fl/hooks/web/useDesign'
import { useAppStore } from '@fl/store/modules/app'
import { computed } from 'vue'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('app')

const appStore = useAppStore()

const currentSize = computed(() => appStore.getCurrentSize)

const greyMode = computed(() => appStore.getGreyMode)

appStore.initTheme()
</script>

<template>
    <ConfigGlobal :size="currentSize">
        <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    </ConfigGlobal>
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-app';

.@{prefix-cls}-grey-mode {
    filter: grayscale(100%);
}
</style>
